<template>
  <div class="detail-shop-info">
    <div class="detail-shop-img">
      <div class="detail-shop-img-item">
        <img :src="Shop.shopLogo" alt="">
        <div>{{Shop.name}}</div>
      </div>
    </div>
    <div class="shop-other-info">
      <div class="shop-other-item">
        <div>
          <p class="much">{{saveNum(Shop.cSells)}}</p>
          <p>总销量</p>
        </div>
        <div>
          <p class="much">{{Shop.cGoods}}</p>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class=" shop-other-right">
        <div v-for="item in Shop.score">
          {{item.name}}&ensp;
          <span class="score" :class="{'score-up':item.isBetter}">{{item.score}}</span>
          <span class="score-bg" :class="{'score-bg-up':item.isBetter}">{{item.isBetter? '高' : '低'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailShopInfo",
    props:{
      Shop:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data() {
      return {

      }
    },
    filters:{
      //过滤器用不了？
    },
    methods:{
      saveNum(value){
        if(value < 10000) return value;
        return (value/10000).toFixed(1)+'万'
      }
    }


  }
</script>

<style scoped>
  .detail-shop-info{
    padding: 0 10px 0 10px;
    clear: left;
    margin-top: 20px;
    border-top: #E0E0E0 5px solid;
  }
  .detail-shop-img{
    align-items: center;
    margin: 20px 10px;


  }
  .detail-shop-img-item img{
    border: 1px solid #E0E0E0;
    width: 50px;
    height:50px;
    border-radius: 50% 50%;
  }
  .detail-shop-img-item div{
    font-size: 14px;
    margin-left: 60px;
    margin-top: -38px;
  }
  .shop-other-info{
    font-size: 14px;
    align-items: center;
    line-height: 22px;
    display: flex;

  }
  .shop-other-item{
    flex: 1;
    display: flex;
  }
  .shop-other-item div{
    flex: 1;
    text-align: center;
  }
  .much{
    font-size: 20px;
  }
  .shop-other-right div{
    font-size: 13px;
  }
  .score{
    display: inline-block;
    width: 30px;
    color: #006666;
  }
  .score-bg{
    background-color: #006666;
    color: #fff;
    padding: 1px 4px;
    font-size: 12px;
  }
  .score-up{
    color:#E91E62;
  }
  .score-bg-up{
    background-color: #E91E62;
  }

</style>